<template>
	<view id="record">
			<mescroll-uni :down="downOption" @up="upCallback" :up="upOption">
				<view class="flex text-center text-lg">
					<view class="padding flex-sub bg-white" v-for="(item, index) in tab" :key="index"
					:class="index==TabCur?'bg-gradual':''" :id="index" @click="tabSelect">{{item}}</view>
				</view>
				 
				<view> 
					<xfl-select
					:list="getStudentName"
					:clearable="false"
					:showItemNum="5" 
					:listShow="false"
					:initValue="initValue"
					:selectHideType="'independent'"
					@change="change"
					>
					</xfl-select>
					<!-- 课时统计 -->
					<view class="bg-white" v-if="TabCur == 0">
						<view class="grid col-5 text-center text-orange solid-bottom padding-tb-sm align-center text-sm">
							<view>课程名字</view>
							<view>学生名字</view>
							<view>剩余课时</view>
							<view>有效期</view>
							<view>预约上课</view>
						</view>
						<view v-for="(item,index) in childTotalList" :key="index" class="grid col-5 text-center solid-bottom text-sm padding-tb-sm align-center">
							<view class="text-cut">{{item.course.course_name}}</view>
							<view>{{item.student.student_name}}</view>
							<view>{{item.class_hour_surplus}}课时</view>
							<view>{{item.expiry_at}}</view>
							<view>
								<button class="cu-btn sm" @tap="showDateModal">预约</button>
								
								<view class="cu-modal" :class="dateModal=='dateModal'?'show':''">
									<view class="cu-dialog">
										<view class="cu-bar bg-white justify-end">
											<view class="content">请选择</view>
											<view class="action" @tap="hideDateModal">
												<text class="cuIcon-close" style="color:#000;"></text>
											</view>
										</view>
										<view class="padding-xl">
											<!-- picker -->
											<ruiDatePicker fields="minute" start="2010-00-00 00:00" end="2030-12-30 23:59" :value="pickerValue" 
											@change="bindChange"></ruiDatePicker>
										</view>
										<view class="cu-bar bg-white justify-center align-center padding-lr-lg">
											<button class="cu-btn flex-sub" style="background-color: #fff;border:2upx solid #000;color:#000;" @tap="hideDateModal">取消</button>
											<button class="cu-btn margin-left flex-sub bg-black" :loading="loading" @tap="applyBtn(item)">确定</button>
										</view>
									</view>	
								</view>
							</view>
						</view>
					</view> 
					
					<!-- 上课记录 -->
					<view class="bg-white" v-else>
						<view class="grid col-5 text-center text-orange solid-bottom padding-tb-sm align-center text-sm">
							<view>课程名字</view>
							<view>学生名字</view>
							<view>消耗课时</view>
							<view>上课时间</view>
							<view>预约上课</view>
						</view>
						<view v-for="(item,index) in childRecordList" :key="index" class="grid col-5 text-center solid-bottom text-sm padding-tb-sm align-center">
							<view class="text-cut">{{item.course.course_name}}</view>
							<view>{{item.student.student_name}}</view>
							<view>{{item.class_hour_use}}课时</view>
							<view>{{item.created_at}}</view>
							<view>
								<button class="cu-btn sm" @tap="showOtherDateModal">预约</button>
								
								<view class="cu-modal" :class="otherDateModal=='otherDateModal'?'show':''">
									<view class="cu-dialog">
										<view class="cu-bar bg-white justify-end">
											<view class="content">请选择</view>
											<view class="action" @tap="hideDateModal">
												<text class="cuIcon-close" style="color:#000;"></text>
											</view>
										</view>
										<view class="padding-xl">
											<!-- picker -->
											<ruiDatePicker fields="minute" start="2010-00-00 00:00" end="2030-12-30 23:59" :value="pickerValue" 
											@change="bindChange"></ruiDatePicker>
										</view>
										<view class="cu-bar bg-white justify-center align-center padding-lr-lg">
											<button class="cu-btn flex-sub" style="background-color: #fff;border:2upx solid #000;color:#000;" @tap="hideDateModal">取消</button>
											<button class="cu-btn margin-left flex-sub bg-black" :loading="loading" @tap="applyBtn(item)">确定</button>
										</view>
									</view>	
								</view>
							</view>
						</view>
					</view>
				</view>
			</mescroll-uni>
			
			
		
		
	</view>
</template>

<script>
	import xflSelect from '@/components/xfl-select/xfl-select.vue'     
	import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";	//下拉刷新上拉加载组件
	import ruiDatePicker from '@/components/rattenking-dtpicker/rattenking-dtpicker.vue'; //picker组件
	import {mapState} from 'vuex'
	
	export default {
		components: {
			xflSelect,
			MescrollUni,
			ruiDatePicker
		},
		data() {
			return {
				tab: ['课时统计', '上课记录'],
				TabCur: 0,	//选项卡当前选中项
				initValue: '全部',
				num: 0,
				downOption: {
					use: false 
				}, 
				upOption:{
					empty:{
						tip: '~ 空空如也 ~', // 提示
						icon: '/static/image/queshengtu.svg'
					}
				},
				childTotalList: [],
				childRecordList: [],
				id: '',
				loading: false,
				dateModal: '',	//日期选择对话框
				otherDateModal: '',
				pickerValue: new Date().getFullYear() + ((new Date().getMonth() + 1) < 10 ? "-0" : "-") + (new Date().getMonth() + 1) + ((new Date().getDate() < 10 ? "-0" : "-") + new Date().getDate()) + ((new Date().getHours() < 10 ? " 0" : " ") + new Date().getHours()) + ((new Date().getMinutes() < 10 ? ":0" : ":") + new Date().getMinutes()),
			}
		}, 
		onLoad() {
			// 我的学生列表
			this.getStudents()
		},
		methods: {
			/*上拉加载的回调: mescroll携带page的参数, 其中num:当前页 从1开始, size:每页数据条数,默认10 */
			async upCallback(mescroll) {
				console.log('上拉加载了', mescroll);
				
				// 此时mescroll会携带page的参数:
				let pageNum = mescroll.num; // 页码, 默认从1开始
				let pageSize = mescroll.size; // 页长, 默认每页10条
				
				if(this.TabCur === 0){
					// 我的课程列表
					let res = []
					if(this.id === ''){
						res = await this.$api.myCourses({page: pageNum, page_size: pageSize})
					}else{
						res = await this.$api.myCourses({student_id: this.id, page: pageNum, page_size: pageSize})
					}
					
					if(res.statusCode === 200){
						console.log('我的课程列表', res.data.data)
						console.log("TabCur="+this.TabCur+", mescroll.num=" + mescroll.num + ", mescroll.size=" + mescroll.size + ", curPageData.length=" + res.data.data.length);
						
						// 接口返回的当前页数据列表 (数组)
						let curPageData = res.data.data
						
						// 接口返回的总条数
						let totalSize = res.data.meta.total
						
						//设置列表数据
						if(mescroll.num == 1) this.childTotalList = []; //如果是第一页需手动置空列表
						this.childTotalList = this.childTotalList.concat(curPageData); //追加新数据
						
						// 成功隐藏下拉加载状态
						//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
						mescroll.endBySize(curPageData.length, totalSize); 
						
						// this.$store.dispatch('sendChildTotal', res.data.data)
					}
				}else{
					// 上课记录
					let res = []
					if(this.id === ''){
						res = await this.$api.getMyClass({page: pageNum, page_size: pageSize})
					}else{
						res = await this.$api.getMyClass({student_id: this.id, page: pageNum, page_size: pageSize})
					}
					
					if(res.statusCode === 200){
						console.log('上课记录', res.data.data)
						console.log("TabCur="+this.TabCur+", mescroll.num=" + mescroll.num + ", mescroll.size=" + mescroll.size + ", curPageData.length=" + res.data.data.length);
						
						// 接口返回的当前页数据列表 (数组)
						let curPageData = res.data.data
						
						// 接口返回的总条数
						let totalSize = res.data.meta.total
						
						//设置列表数据
						if(mescroll.num == 1) this.childRecordList = []; //如果是第一页需手动置空列表
						this.childRecordList = this.childRecordList.concat(curPageData); //追加新数据
						
						// 成功隐藏下拉加载状态
						//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
						mescroll.endBySize(curPageData.length, totalSize); 
						
						// this.$store.dispatch('sendChildRecord', res.data.data)
					}
				}
				
			},
			// 我的学生列表
			async getStudents(){
				let res = await this.$api.students()
				if(res.statusCode === 200){
					
					console.log('我的学生列表', res.data.data)
					
					this.$store.dispatch('sendStudents', res.data.data)
				}
			},
			// 下拉框选项改变
			change({newVal, oldVal, index, orignItem}){ 
				uni.showNavigationBarLoading()
				
				console.log(newVal, oldVal, index, orignItem)
				
				let student_id = this.$store.state.studentsList[index].id
				
				this.id = student_id
				
				if(this.TabCur == 0){
					// 我的课程列表
					this.getMyCourses(student_id)
				}else{
					// 上课记录
					this.getMyClass(student_id)
				}
				
			},
			// 选项卡点击
			tabSelect(e) {
				this.id = ''
				
				// 初始化下拉框的值为全部
				this.initValue = ++this.num
				
				uni.showNavigationBarLoading()
				
				let index = e.currentTarget.id
				
				this.TabCur = index
				
				if(index == 0){
					// 我的课程列表
					this.getMyCourses()
				}else if(index == 1){
					// 上课记录
					this.getMyClass()
				}
			},
			// 我的课程列表
			async getMyCourses(id){
				let res = []
				if(id === undefined){
					res = await this.$api.myCourses({page: 1, page_size: 10})
				}else{
					res = await this.$api.myCourses({page: 1, page_size: 10, student_id: id})
				}
				
				if(res.statusCode === 200){
					uni.hideNavigationBarLoading()
					
					console.log('我的课程列表', res.data.data)
					
					this.childTotalList = res.data.data
					
					// this.$store.dispatch('sendChildTotal', res.data.data)
				}
			},
			// 上课记录
			async getMyClass(id){
				let res = []
				if(id === undefined){
					res = await this.$api.myClass({page: 1, page_size: 10})
				}else{
					res = await this.$api.myClass({page: 1, page_size: 10, student_id: id})
				}
				
				if(res.statusCode === 200){
					uni.hideNavigationBarLoading()
					
					console.log('上课记录', res.data.data)
					
					this.childRecordList = res.data.data
					
					// this.$store.dispatch('sendChildRecord', res.data.data)
				}
			},
			showDateModal(){
				this.dateModal = 'dateModal'
			},
			showOtherDateModal(){
				this.otherDateModal = 'otherDateModal'
			},
			hideDateModal(){
				this.dateModal = ''
				this.otherDateModal = ''
			},
			// 时间选择器点击【确定】按钮时触发的事件，参数为picker的当前的 value
			bindChange(value) {
				this.pickerValue = value
			},
			// 预约上课
			async applyBtn(item){
				console.log(item);
				this.loading = true
				
				try{
					let res = await this.$api.courseApply(item.course.id, {
						apply_date: this.pickerValue, username: item.student.student_name, phone: item.student.phone, type: '2'
					})
					if (res.statusCode === 200 || res.statusCode === 201) {
						this.loading = false
							
						console.log('预约上课', res)
						
						uni.showToast({
							title: '预约成功',
							mask: true,
							success: () => {
								setTimeout(() => {
									this.dateModal = false
									
									uni.navigateTo({
										url: '/pages/reservation/reservation'
									})
								}, 1500)
							}
						})
					}
				}catch(err){
					this.loading = false
				}
			}
		},
		computed: {
			...mapState(['studentsList']),
			
			// 过滤出所有孩子的名字组成的数组
			getStudentName(){
				return this.$store.getters.filterStudentName
			}
		}
	} 
</script> 

<style lang="scss">
	
</style>
